<!DOCTYPE html>
<html lang="en">
<head>
    <title style="display: none">Mesh2Motion - Explore</title>
    <link rel="icon" type="image/png" href="./images/favicon.png"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="margin: 0">
    <!-- Script files-->
    <script type="module" src="./marketing/MarketingBootstrap.ts"></script>

    <!-- Stylesheets-->
    <link href="./styles.css" rel="stylesheet" crossorigin="anonymous" />
    <link rel="stylesheet" href="./radio-button-group.css" crossorigin="anonymous" />
    <link rel="stylesheet" href="./animation-player.css" crossorigin="anonymous" />
    <link rel="stylesheet" href="./dialog.css" crossorigin="anonymous" />
    <link rel="stylesheet" href="./marketing/marketing.css" crossorigin="anonymous" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

    <nav>
        <div style="display: inline-flex; align-items: center;">
            <a href="https://mesh2motion.org"><img src="./images/mesh2motion.svg" width="200" /></a>
            <span class="active-nav-item">Explore</span>
            <a href="/create.html">Create</a>
        </div>

        <div style="display: inline-flex; align-items: center;">
             <a href="https://support.mesh2motion.org" target="_blank"> 💗 Support</a>
            <a href="https://github.com/scottpetrovic/mesh2motion-app" target="_blank">Github</a>
            <a href="#" id="attribution-link">Contributors</a>            

            <!-- Theme Toggle -->
            <button id="theme-toggle">
                <!-- icon will fill in here-->
                <span class="theme-icon"></span>
            </button>
        </div>
    </nav>

    <!-- Top toolbar with mouse controls -->
    <div id="header-ui">
        <div>
            <img src="./images/mouse-left.svg" height="30" width="30" style="vertical-align: middle;"/> Rotate
        </div>

        <div>
            <img src="./images/mouse-right.svg" height="30" width="30" style="vertical-align: middle;"/> Pan
        </div>
        <div>
            <img src="./images/mouse-middle.svg" height="30" width="30" style="vertical-align: middle;"/> Zoom
        </div>
    </div>

    <div class="model-selection-section">
        <button id="load-human-model-button">Human</button>
        <button id="load-fox-model-button">Fox</button>
        <button id="load-bird-model-button">Bird</button>
        <button id="load-dragon-model-button">Dragon</button>
    </div>


    <div id="tool-panel">
        <!-- create a radio button group. There are two options. Move Skeleton, Rotate Mesh -->
        <div id="tool-selection-group">
           
                <!-- <div style="margin-bottom: 1rem; padding: 0;">

                    <span id="current-step-label"></span>
                </div> -->

                <div id="load-skeleton-tools">

                    <span>
                        <span style="max-width: 220px">Rotate Model to face front <br/> (blue origin line)</span>
                        <div style="display: flex; flex-direction: row">
                            <button class="secondary-button" id="rotate-model-x-button">X</button>
                            <button class="secondary-button" id="rotate-model-y-button">Y</button>
                            <button class="secondary-button" id="rotate-model-z-button">Z</button>
                        </div>
                    </span>


                        <div style="display: flex; flex-direction: column; gap: 1rem;">
                            <span>Skeleton template:</span>
                            <select id="skeleton-selection">
                                <option value="select-skeleton">Select a skeleton</option>
                                <option value="human">Human</option>
                                <option value="quadraped">4 Leg Creature</option>
                                <option value="bird">Bird</option>
                                <option value="dragon">Dragon</option>
                            </select>
                        </div>

                </div>


            <span id="skeleton-step-actions">



                <!-- option to change out skinning algorithm -->
                <label style="display: none" for="skinning-algorithm-options">Skinning algorithm:</label>
                <select style="display: none" id="skinning-algorithm-options">
                    <option value="closest-distance-targeting">Closest Distance Targeting</option>
                    <option value="closest-bone">Closest Bone</option>
                    <option value="closest-bone-child">Closest Distance Child</option>
                </select>


                <!-- back to load skeleton -->
                 <div class="display: flex; gap: 0.5rem;">
                     <button class="secondary-button" id="action_back_to_load_skeleton" >&#x2039; Back</button>
                     <button id="action_bind_pose" >Bind pose</button>
                 </div>

            </span>

            <span id="skinned-step-animation-export-options">

                <div id="animations-listing">
    
                    <!-- Filter textbox for animations -->     
                    <div id="animation-listing-count">0</div>
                    <input type="text" id="animation-filter" placeholder="Filter animations...">

                    <!-- loading progress when animations start getting larger. -->
                    <div id="animation-progress-loader-container" style="display: none">
                        <div id="loading-status-text">Loading animation data</div>
                        <div id="loading-progress-bar"></div>
                        <div id="current-file-progress-bar"></div>
                    </div>
       
        
                    <!-- javascript will populate this item with animations
                         that we get from the animations file(s)  -->
                    <div id="animations-items"> </div> 

       
       

                    <div style="display: flex; gap: 0.5rem;">
                        <!-- checkbox option to show skeleton -->
                        <div class="styled-checkbox icon-toggle">
                            <input type="checkbox" id="show-skeleton-checkbox" name="show-skeleton" value="show" style="display:none;">
                            <label for="show-skeleton-checkbox" data-tippy-content="Show skeleton"  tabindex="0">
                                <img src="./images/icons/bone-display.svg" width="30" height="30" alt="Show skeleton" />
                            </label>
                        </div>
                        

                        
                        <!-- testing the mirroring options -->
                        <div class="styled-checkbox icon-toggle">
                            <input type="checkbox" id="mirror-animations-checkbox" name="mirror-animations" value="true" style="display:none;">
                            <label for="mirror-animations-checkbox" data-tippy-content="Mirror animations"  tabindex="0">
                                <img src="images/icons/mirror.svg" alt="Mirror animations" width="30" height="30" />
                            </label>
                        </div>

                        <button id="export-button" title="Export animations. Make sure to select the animations you want to export first.">
                            <span class="button-icon-group">
                                <span class="material-symbols-outlined">save_alt</span>
                                <span>Download <span id="animation-selection-count">0</span></span>
                            </span>
                        </button>
                        <a id="download-hidden-link" href="#" style="display:none"></a>
                    </div>


       
                </div>
        
               
            </span>


        </div>

    </div> <!-- end tool-panel-->

    <!-- Free-floating Animation Player -->
    <div id="animation-player">
        <div id="current-animation-container">
            <span id="current-animation-name">No animation selected</span>
        </div>
        <div id="play-controls">
            <button id="play-pause-button" class="animation-control-button" disabled>
                <span class="material-symbols-outlined">play_arrow</span>
            </button>
            <span>
                <span id="current-time">0f</span> / 
                <span id="total-time">0f</span>
            </span>
            <input type="range" id="animation-scrubber" min="0" max="100" value="0" disabled>
        </div>

    </div>

    <!-- 3d view control hit box. It is just a container to help with 3d view controls. -->
    <div id="view-control-hitbox"></div>


    <!-- build version information-->
    <span id="build-version"></span>

</body>
</html>